Ant Design Vue — Menu Theme and Page Header

Ant Design Vue or AntD Vue, is a useful UI framework made for Vue.js.

In this article, we’ll look at how to use it in our Vue apps.

Menu Theme

We can set the theme prop to change the menu theme:

<template>
  <div id="app">
    <a-menu
      style="width: 256px"
      :default-selected-keys="['1']"
      :default-open-keys="['sub1']"
      mode="inline"
      :theme="theme"
      :selected-keys="[current]"
      @click="handleClick"
    >
      <a-menu-item key="1">
        <a-icon type="mail"/>Navigation One
      </a-menu-item>
      <a-menu-item key="2">
        <a-icon type="calendar"/>Navigation Two
      </a-menu-item>
      <a-sub-menu key="sub1">
        <span slot="title">
          <a-icon type="appstore"/>
          <span>Navigation Three</span>
        </span>
        <a-menu-item key="3">Option 3</a-menu-item>
        <a-menu-item key="4">Option 4</a-menu-item>
        <a-sub-menu key="sub1-2" title="Submenu">
          <a-menu-item key="5">Option 5</a-menu-item>
          <a-menu-item key="6">Option 6</a-menu-item>
        </a-sub-menu>
      </a-sub-menu>
      <a-sub-menu key="sub2">
        <span slot="title">
          <a-icon type="setting"/>
          <span>Navigation Four</span>
        </span>
        <a-menu-item key="7">Option 7</a-menu-item>
        <a-menu-item key="8">Option 8</a-menu-item>
      </a-sub-menu>
    </a-menu>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      current: "1",
      theme: "dark"
    };
  },
  methods: {
    handleClick(e) {
      console.log("click ", e);
      this.current = e.key;
    },
    changeTheme(checked) {
      this.theme = checked ? "dark" : "light";
    }
  }
};
</script>

Page Header

We can add a page header with the a-page-header component:

<template>
  <div id="app">
    <a-page-header
      style="border: 1px solid rgb(235, 237, 240)"
      title="Title"
      sub-title="This is a subtitle"
      @back="() => null"
    />
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

We add the title and sub-title props to add the title and subtitles.

The back event is emitted when we click the back button.

We can add it with breadcrumbs with the breadecrumbs prop:

<template>
  <div id="app">
    <a-page-header
      style="border: 1px solid rgb(235, 237, 240)"
      title="Title"
      :breadcrumb="{ props: { routes } }"
      sub-title="This is a subtitle"
    />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      routes: [
        {
          path: "index",
          breadcrumbName: "First-level Menu"
        },
        {
          path: "first",
          breadcrumbName: "Second-level Menu"
        }
      ]
    };
  }
};
</script>

We can populate the extra slot of the a-page-header with our own content:

<template>
  <div id="app">
    <a-page-header
      style="border: 1px solid rgb(235, 237, 240)"
      title="Title"
      sub-title="This is a subtitle"
      @back="() => $router.go(-1)"
    >
      <template slot="extra">
        <a-button key="2">Operation</a-button>
        <a-button key="1" type="primary">Primary</a-button>
      </template>
      <a-descriptions size="small" :column="3">
        <a-descriptions-item label="Created">james smith</a-descriptions-item>
        <a-descriptions-item label="Title">Writer</a-descriptions-item>
      </a-descriptions>
    </a-page-header>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

We add the extra slot and populate it with buttons.

Also, we populate the default slot with the a-description component to add more content.

We can also set the background by setting the background color on the container and setting the ghost prop to false to show the background:

<template>
  <div style="background-color: #F5F5F5; padding: 24px;">
    <a-page-header
      :ghost="false"
      title="Title"
      sub-title="This is a subtitle"
      @back="() => $router.go(-1)"
    >
      <template slot="extra">
        <a-button key="2">Operation</a-button>
        <a-button key="1" type="primary">Primary</a-button>
      </template>
      <a-descriptions size="small" :column="3">
        <a-descriptions-item label="Created">james smith</a-descriptions-item>
        <a-descriptions-item label="Title">Writer</a-descriptions-item>
      </a-descriptions>
    </a-page-header>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

Conclusion

We can set a theme for menus and add a page header to our Vue app with Ant Design Vue.